<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <style>
    table {
      width: 50%;
      margin-top: 20px;
    }

    tr {
      width: 100%;
    }

    td {

      text-align: center;
      line-height: 40px;
    }
  </style>
  <script>
    $(function () {
      $('#hq').on({
        click:function(){
          $.ajax(
            {
              type:'GET',
              url:"http://localhost:8080/student/getStudent",
              dataType:'json',
              success:function(data,textStatus){
                console.log(data);
                const stuarr=data.data;
                for(let i = 0;i < stuarr.length;i++){
                  let line="";
                  line="<tr><td>"+stuarr[i].name+"</td><td>"+stuarr[i].age+"</td><td>"+stuarr[i].no+"</td><td>"+stuarr[i].no+"</td><td>删除</td></tr>";
                  $('tbody').append(line)
                }
              }
            }
          )
        }
      })

      $('#addStudent').on({
        click:function(){

           var name = $('.name').val()
           var no = $('.no').val()
           var age = $('.age').val()
           var json = {'name':name,'no':no,'age':age}
          $.ajax(
            {
              type:'POST',
              url:"http://localhost:8080/student/addStudent",
              data:JSON.stringify(json),
              dataType:'json',
              headers:{'Content-Type':'application/json;charset=utf-8'},
              success:function(data,textStatus){
                var code = data.code
                if(code == "20000") {
                  alert(data.msg);

                  $.ajax(
            {
              type:'GET',
              url:"http://localhost:8080/student/getStudent",
              dataType:'json',
              success:function(data,textStatus){
                console.log(data);
                const stuarr=data.data;
                for(let i = 0;i < stuarr.length;i++){
                  let line="";
                  line="<tr><td>"+stuarr[i].name+"</td><td>"+stuarr[i].age+"</td><td>"+stuarr[i].no+"</td><td>"+stuarr[i].no+"</td><td>删除</td></tr>";
                  $('tbody').append(line)
                }
              }
            }
          )
                }     
                else alert(data.msg)               
              }
            }
          )
        }
      })

      $('#cz').on({
        click:function(){
          var no = $('.no').val()
          
          var json = {'no':no}

          $.ajax(
            {
              type:'POST',
              url:"http://localhost:8080/student/searchStudentByno",
              data:JSON.stringify(json),
              dataType:'json',
              headers:{'Content-Type':'application/json;charset=utf-8'},
              success:function(data,textStatus){
                const stuarr=data.data;
                for(let i = 0;i < stuarr.length;i++){
                  let line="";
                  line="<tr><td>"+stuarr[i].name+"</td><td>"+stuarr[i].age+"</td><td>"+stuarr[i].no+"</td><td>"+stuarr[i].no+"</td><td>删除</td></tr>";
                  $('tbody').append(line)
                }
                
              }
            }
          )
        }
      })

      $('#sc').on({
        click:function(){
          var no = $('.no').val()
          var json = {'no':no}

          $.ajax(
            {
              type:'POST',
              url:"http://localhost:8080/student/deleteStudent",
              data:JSON.stringify(json),
              dataType:'json',
              headers:{'Content-Type':'application/json;charset=utf-8'},
              success:function(data,textStatus){
                var code = data.code
                if (code == "20000") {
                  alert(data.msg)
                } else 
                alert(data.msg)
                
                
              }
            }
          )
        }
      })

      $('#tj').on('click', function () {
        if ($('.name').val() && $('.age').val() && $('.no').val() && $('.sex:checked')) {
          $('tbody').append(`<tr><td>${$('.name').val()}</td>
            <td>${$('.age').val()}</td>
            <td>${$('.no').val()}</td>
            <td>${$('.sex:checked').val()}</td>
            <td><a href="#">删除</a></td></tr>`)
        } else {
          alert('格式错误')
        }
      }
      )
      $('tbody').on('click', 'tr', function () {
        $(this).css('background', '#ccc').siblings('tr').css('background', '')
      })
      $('tbody').on('click', 'a', function () {
        $(this).parent().parent().slideUp(function () {
          $(this).remove()
        })
      })

    })
  </script>
</head>

<body>
  <div>
    <span>姓名:</span>

    <input type="text" class="name">
    <span>年龄:</span>
    <input type="text" class="age">
    <span>学号:</span>
    <input type="text" class="no">
    <span>男:</span>
    <input type="radio" name="sex" value="男" class="sex">
    <span>女:</span>
    <input type="radio" name="sex" value="女" class="sex">
    <button id="tj">提交</button>
    <button id="hq">获取</button>
    <button id="addStudent">添加学生</button>
    <button id="cz">查找</button>
    <button id="sc">删除</button>
  </div>
  <table border="1" cellspacing="0" cellpadding="0"
    style="border-collapse: collapse;border-width:1px; border-style:hidden;">
    <thead>
      <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>学号</td>
        <td>性别</td>
        <td>操作</td>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>



</body>

</html>